<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top:0;}
    .line{width: 1px;height: 500px;background: black;position: absolute;left: 500px;top:0;}
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="line"></div>
</body>
<script>
  const box = document.querySelector(".box");
  let t;
  const speed = 7;
  const target = 500;

  box.onclick = function(){
    if(t) return;
    t = setInterval(()=>{
      // 判断剩下距离是否足够一步，不够一步
      if( target - box.offsetLeft < speed ){
        // 停止计时器
        clearInterval(t);
        // 并强行设置到目标
        box.style.left = target + "px";
      }else{
        box.style.left = box.offsetLeft + speed + "px";
      }
    }, 30);
  }

  // 运动的原理
  // 时间：频率，30ms
  // 步长：速度
  // 目标：停止条件

  
</script>
</html>